<template>
    <div>
      <Cv :show="showCv"
          @close-cv="closeCv"
          @scan-result="scanResult"
          v-if="showCv"
      ></Cv>
        <div class="create-panel" v-if="!showCv">
            <div class="services">
                <el-row class="service-el-row">
                    <el-col :span="24">
                        <el-select class="order-service"
                                   v-model="serviceId"
                                   clearable filterable
                                   :placeholder="$t('选择_搜索服务')"
                                   @change="changeDesc"
                                   @clear="clearDesc">
                            <el-option-group class="no-divider" v-for="group in serviceList" :key="group.parent"
                                             :label="group.parent">
                                <el-option v-for="item in group.options" :key="item.serviceId" :label="item.label"
                                           :value="item.serviceId" :style="{width:selectOptionWidth}"/>
                            </el-option-group>
                        </el-select>
                    </el-col>
                </el-row>
            </div>
            <div class="current-score-info">
                <span>{{$t('当前积分')}}:￥{{this.$store.state.point}}</span><a v-on:click="replace('charge')" style="color:blue">({{$t('充值')}}</a>
            </div>
            <div class="order">
                <div class="order-con">
                    <div class="service-input">
                        <span>{{$t('订单内容')}}</span>
                      <button v-if="isWxOrMobile()" @click="cv">{{$t('扫一扫')}}</button>
                        <el-input
                                class="order-info"
                                type="textarea"
                                :autosize="{ minRows: 10}"
                                :placeholder="$t('订单内容输入框提示')"
                                v-model="imeis"
                        >
                        </el-input>
                        <span>{{$t('订单备注')}}({{$t('可选')}})</span>
                        <el-input
                                type="textarea"
                                :autosize="{ minRows: 2, maxRows: 4}"
                                :placeholder="$t('如客户信息_设备编码等')"
                                v-model="remark">
                        </el-input>
                        <el-button type="primary" :disabled="disableCommit" @click="submitOrder" style="margin-top: .5rem">
                            {{$t('确认提交')}}
                        </el-button>
                        <el-checkbox v-if="showConfirm" v-model="confirm" @change="checkBoxChange"
                                     style="font-weight: bolder;color: red;margin-left: .5rem">
                            {{$t('我已查看服务说明并同意其中条款')}}
                        </el-checkbox>
                    </div>
                    <div class="describe">
                        <span>{{$t('在上方选择需要下单的服务')}}</span>
                        <div v-html="describe"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import apiService from '@/api/apiService';
import {isWx,isMobile} from '@/utils';
import {errorMsg, groupByParent, replace, getUser, getCurrentUser} from "@/utils";
import Cv from "@/views/Cv.vue";
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "Create",
    components: {Cv},
    data() {
        return {
            serviceList: [],
            item: '',
            imeis: '',
            remark: '',
            userInfo: '',
            serviceInfo: '',
            temServices: [],
            cb: null,
            serviceId: '',
            describe: '',
            disableCommit: true,
            confirm: false,
            showConfirm: false,
            selectOptionWidth: '',
            user:null,

            //是否显示扫一扫
            showCv:false
        }
    },
    mounted() {
        this.resizeSelect()
        window.addEventListener('resize', this.resizeSelect);
        this.$nextTick(function () {
            apiService.get("/all-service").then(res => {
                this.serviceList = groupByParent(res.data)
                if (this.$route.query.serviceId) {
                    this.serviceId = this.$route.query.serviceId
                    this.changeDesc(this.serviceId)
                }
            })
        })
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.resizeSelect);
    },
    created(){
        this.user = getUser()
    },
    methods: {
        isWxOrMobile(){
          return isWx() || isMobile()
        },
      scanResult(val){
        this.imeis = val
      },
      closeCv(){
        this.showCv = false
      },
        cv(){
          this.showCv = true
        },
        replace,
        resizeSelect() {
            this.$nextTick(()=> {
                this.selectOptionWidth = this.$el.querySelector('.services').offsetWidth+'px !important'
            })
        },
        checkBoxChange(newVal) {
          this.disableCommit = newVal !== true;
        },
        clearDesc() {
            this.serviceId=''
            this.describe=''
            this.showConfirm = false
            this.disableCommit = true
        },
        changeDesc(serviceId) {
            try {
                this.serviceList.forEach(service=> {
                    service.options.forEach(option=> {
                        if (option.serviceId === serviceId) {
                            this.describe = option.descriptionTemplate;
                            this.confirm = false
                            this.disableCommit = true
                            // 用错误中断两层循环
                            throw new Error();
                        }
                    })
                })
                // eslint-disable-next-line no-empty
            } catch (ignore) {}
            finally {
                this.showConfirm = !!this.describe;
                if (!this.showConfirm) {
                    this.disableCommit = !this.serviceId
                }
            }

        },
        submitOrder() {
            if (!this.imeis) {
                this.$message.error(this.$t('请输入订单内容'))
                return
            }
            const params = {
                serviceId: this.serviceId,
                serviceNumber: this.imeis,
                desc: this.remark
            }
            this.$nextTick(function () {
                apiService.post("/submit-order", params).then(res => {
                    if (res.code === 0) {
                        this.$message.success("订单提交成功")
                        this.imeis = ''
                        this.remark = ''
                      // apiService.get('/currentUserInfo').then(res=>{
                      //   if(res.code === 0){
                      //     storage.set(appConfig.APP_USER,res.data)
                      //   }
                      // })
                      getCurrentUser('create')
                    } else {
                        this.$message.error(errorMsg(res))
                    }
                }).catch(error => {
                    this.$message.error(error)
                })
            })
        }
    }
};
</script>

<style>
.create-panel {
  /*width: 100vw;*/
  height: 100%;
  box-shadow: 0 0 0 .2rem #00000005;
  border-radius: 10px;
  border: solid white 1px;
  background: rgb(255, 255, 255);
  margin: auto;
  //width: 95%;
  padding: 1rem;
}


.current-score-info {
  width: 100%;
  text-align: left;
}

.order {
  text-align: left;
}

.order-info {
  text-align: left;
}

.describe {
    display: block;
    width: 95%
}
.service-input {
    width: 95%;
}

@media screen and (min-width: 1060px) {
    .order-con {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .describe {
        display: block;
        width: 49%
    }
    .service-input {
        width: 49%;
    }
}

.no-divider:not(:last-child)::after {
    content: none !important; /* 移除组之间的分割线 */
}

.no-divider:not(:last-of-type) {
    padding-bottom: 0;
}

.el-select-group__title {
    margin: 0;
    color: #1f2125;
    background: #ffffff;
    font-size: smaller;
    font-weight: 600 !important;
}

.order-service {
    width: 100%;
    max-width: unset !important;
    text-align: left;
}

/*.customPopperClass .el-select-dropdown {*/
/*    width: auto; !* 或者设置一个固定的max-width *!*/
/*    min-width: unset;*/
/*    margin-left: auto;*/
/*    box-sizing: border-box;*/
/*}*/
</style>
